<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <!-- 引入vue -->
    <script src="js/vue.js"></script>
    <!-- 引入element-ui -->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="element-ui/lib/index.js"></script>
    <!-- 引入axios -->
    <script src="js/axios-0.18.0.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <!-- vue要接管的区域 -->
    <div id="app" v-cloak>
        <el-row >
            <!-- 行内表单 -->
            <el-form :inline="true" :model="queryOptions" class="demo-form-inline">
                <el-form-item label="学生姓名">
                    <el-input v-model="queryOptions.sname" placeholder="学生姓名"></el-input>
                </el-form-item>
                <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <hr>
        <!-- 表格 -->
        <el-table
            :data="tableData"
            stripe
            style="width: 100%;padding: 20px"
            >
            <el-table-column
                prop="cname"
                label="学生班级">
            </el-table-column>
            <el-table-column
                prop="sid"
                label="学生学号">
            </el-table-column>
            <el-table-column
                prop="sname"
                label="学生姓名">
            </el-table-column>
            <el-table-column
                prop="gender"
                label="性别">
                <template slot-scope="scope">
                    {{scope.row.gender == '1' ? '男':'女'}}
                </template>
            </el-table-column>
            <el-table-column
                prop="birthday"
                label="出生年月">
            </el-table-column>
        </el-table>
        <br>
        <!-- 分页条 -->
        <el-pagination
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="prev, pager, next, total"
        :total="pagination.totalCount">
        </el-pagination>        
    </div>

    <!-- 初始化vue -->
    <script>
        new Vue({
            el:"#app",
            data:{
                tableData:[],
                //分页条件封装
                pagination:{
                    currentPage:1, 
                    pageSize:10,
                    totalCount:100
                },
                //查询封装体
                queryOptions:{
                    sname:''
                }
            },
            methods:{
                //当分页条的当前页修改时会触发的逻辑
                handleCurrentChange(page){
                    this.pagination.currentPage = page;
                    this.page()
                },
                //search => 条件查询
                search(){
                    this.pagination.currentPage = 1;
                    this.page();
                },
                page(){
                    let url = '/students/page?currentPage=' + this.pagination.currentPage+'&pageSize=' + this.pagination.pageSize
                    axios.post(url,this.queryOptions)
                        .then(resp => {
                            if (resp.data.code == "200") {
                                this.tableData = resp.data.records;
                                this.pagination.totalCount = resp.data.totalCount;
                            }else{
                                location.href="/pages/login.html"
                            }
                        })
                }
            },
            created(){
                this.page()
            }
        })
    </script>
</body>
</html>